<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="qslide.mini.js"></script>
<script type="text/javascript">
// start
$(document).ready(function(){
	QSLIDE.init('_qslide_show_container', '_qslide_show_slide', true);	
	var s1onload = function() {
		QSLIDE.log('slide show 1 is loaded!');
		// change one slide's fx...
		// speed, interval, easing
		QSLIDE.getContainer('slide_show_1').setFx(1000, 5000, 'easeOutBounce');
		// individual:				
		QSLIDE.getSlide('slide_show_1', 'page1').setFx(1000, 5000, 'easeInBack');
        QSLIDE.getSlide('slide_show_1', 'page3').setFx(3000, 8000, 'easeOutBack');
        // navigation...
        QSLIDE.getContainer('slide_show_1').renderNav('nav_for_slide_show_1');
	};
	QSLIDE.start('slide_show_1', s1onload);

	var s2onload = function() {
        QSLIDE.log('slide show 2 is loaded!');
        // change one slide's fx...
        // speed, interval, easing
        QSLIDE.getContainer('slide_show_2').setFx(2000, 5000, 'easeOutBounce');
        // individual:              
        QSLIDE.getSlide('slide_show_2', 'page12').setFx(1000, 5000, 'easeInOutBounce');
    };
    QSLIDE.start('slide_show_2', s2onload);

    // also start slide 3
    QSLIDE.start('slide_show_3');
});
</script>
<style>
.slide1{
width:480px;
height:270px;
border:1px solid #ccc;
background:#fff;
}

.slide2{
width:300px;
height:200px;
border:1px solid #fff;
background:#ccc;
margin-right:12px;
float:left;
}

.slide3{
width:200px;
height:150px;
border:1px solid #000;
background:#fff; 
float:left;
}

a{
color:#fff;
}

a.active{
background:#69c;
color:#fff;
}

.padding, body{
padding:12px;
font:12px georgia;
}

.loading{
background:#fff url('ajax-loader.gif') no-repeat 48% 48%;
}
</style>
</head>
<body style="background:#999;">
<div class="_qslide_show_container slide1" id="slide_show_1" style="display:none;">
    <div class="_qslide_show_slide" id="home" title="home">
        <div class="padding">
        <h3>home</h3>
        <p>some text for home...</p>
          
        <img src="http://www.cfa.harvard.edu/image_archive/2008/30/hires.jpg" width="300" height="200" />
          
        </div>
    </div>
    
    <div class="_qslide_show_slide" id="page1" title="page 1" style="background:yellow">
    <div class="padding">
        <h3>page 1</h3>
        <p>some text for page 1...</p>
        </div>
    </div>
    
    <div class="_qslide_show_slide" id="page2" title="page 2" style="background:blue;">
    <div class="padding">
        <h3>page 2</h3>
        <p>some text for page 2...
        <!-- 
        <img src="http://esamultimedia.esa.int/images/marsexpress/134-021104-0533-6-co-02-HaleCrater_hires.jpe" width="100" height="60" />
         --> 
        </p>
        </div>
    </div>
    
    <div class="_qslide_show_slide" id="page3" title="page 3" style="background:green">
    <div class="padding">
        <h3>page 3</h3>
        <p>some text for page 3...</p>
       </div> 
    </div>
</div>

<input type="button" onclick="QSLIDE.getContainer('slide_show_1').jump('page3');" value="go to page 3" />
<input type="button" onclick="QSLIDE.getContainer('slide_show_1').pause();" value="pause" />
<input type="button" onclick="QSLIDE.getContainer('slide_show_1').start();" value="start" />
<input type="button" onclick="QSLIDE.getContainer('slide_show_1').stop();" value="stop" /><br />
<input type="button" onclick="QSLIDE.hideSlide('slide_show_1', 'page2');" value="hide page 2" />
<input type="button" onclick="QSLIDE.showSlide('slide_show_1', 'page2');" value="show page 2" />
<input type="button" onclick="QSLIDE.removeSlide('slide_show_1', 'page2');" value="kill page 2" />
<input type="button" onclick="addSlide('slide_show_1', 'home');" value="replace home" />
<input type="button" onclick="addSlide('slide_show_1', 'page4');" value="add page 4" />
<br />
<div style="padding:12px; background:#000;">
<a href="#" onclick="QSLIDE.getContainer('slide_show_1').prev(); return false;">&lt;</a> |
<span id="nav_for_slide_show_1"></span>
| <a href="#" onclick="QSLIDE.getContainer('slide_show_1').next(); return false;">&gt;</a>
</div>


<script type="text/javascript">
function addSlide(id, tid)
{
	var src = '<div id="' + tid + '" title="this is ' + tid +'">' +
              '<div class="padding"><p>' + tid +'</p></div>' +
              '</div>';
    return QSLIDE.addSlide(id, src);	
}
</script>

<hr />
<div class="_qslide_show_container slide2" id="slide_show_2" style="display:none;">
    <div class="_qslide_show_slide" id="home2" title="home">
        <div class="padding">
        <h3>home</h3>
        <p>some text for home...</p>
        <!-- 
        <img src="http://www.cfa.harvard.edu/image_archive/2008/30/hires.jpg" width="300" height="200" />
        -->
        </div>
    </div>
    
    <div class="_qslide_show_slide" id="page12" title="page 1" style="background:yellow">
    <div class="padding">
        <h3>page 1</h3>
        <p>some text for page 1...</p>
        </div>
    </div>
    
    <div class="_qslide_show_slide" id="page22" title="page 2" style="background:blue;color:#fff;">
    <div class="padding">
        <h3>page 2</h3>
        <p>some text for page 2...
         
        <img src="http://esamultimedia.esa.int/images/marsexpress/134-021104-0533-6-co-02-HaleCrater_hires.jpe" width="100" height="60" />
         
        </p>
        </div>
    </div>
</div>
<input type="button" value="shuffle" 
onclick="QSLIDE.shuffle('slide_show_2', ['page12', 'page22', 'home2']);" />
<input type="button" value="20 seconds for slide page22" 
onclick="QSLIDE.getSlide('slide_show_2', 'page22').setFx(1000, 20000, 'easeInOutBounce');" />

<div class="_qslide_show_container slide3" id="slide_show_3" style="display:none;">
    <div class="_qslide_show_slide" id="home3" title="home">
        <div class="padding">
        <h3>home</h3>
        <p>some text for home...</p>
        <!-- 
        <img src="http://www.cfa.harvard.edu/image_archive/2008/30/hires.jpg" width="300" height="200" />
        -->
        </div>
    </div>
    
    <div class="_qslide_show_slide" id="page23" title="page 2" style="background:blue;color:#fff;">
    <div class="padding">
        <h3>page 2</h3>
        <p>some text for page 2...
         
        <img src="http://esamultimedia.esa.int/images/marsexpress/134-021104-0533-6-co-02-HaleCrater_hires.jpe" width="100" height="60" />
         
        </p>
        </div>
    </div>
</div>
</body>
</html>